<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width:80%;
            height: 450px;
            border:1px solid #ccc;
            margin:20px auto;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="./lib/echarts.min.js"></script>
<script>
    //获取dom
    const box=document.querySelector('#box')
    //生成echarts图表对象
    const myChart=echarts.init(box)
    //配置图标对象
    const options={
        //图表标题
        title:{
            text:'Echarts快速入门'
        },
        //图例
        legend:{
            orient: 'vertical',
            top:'50%',
            right:0,
            data:['销量','销量趋势',{
                name:'就业城市比',
                itemStyle:{
                 color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                    }
                }
            }]
        },
        //鼠标提示
        tooltip:{},
        //x轴
        xAxis:{
            data:['服装','玩具','食品','数码']
        },
        //y轴
        yAxis:{
            //轴线刻度
            axisLabel:{
                show:true,
                color:'#00f',
                //刻度格式
               // formatter:'{value} 件',
            //    formatter: function (value, index) {
            //         return value + ' 个数';
            //     }
            },
            //分隔线
            splitLine:{
                show:false,
                lineStyle:{
                    color:'#f00',
                    type:'dashed'
                }
            },
            //轴线配置
            axisLine:{
                show:true,
                lineStyle:{
                    color:'#ccc'
                }
            }
        },
        //系列：绘制图表
        series:[
            //柱形图
            {
                //指定图表名称
                name:'销量',
                //指定图表类型
                type:'bar',
                data:[100,120,80,500],
                //柱形图宽度
                barWidth:120,
                itemStyle:{
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(57,89,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }]),
                }
            },
            //折线图
            {
                name:'销量趋势',
                type:'line',
                data:[220,50,290,220],
                smooth:true,
                // areaStyle:{
                //     color:{
                //         type: 'linear',
                //         x: 0,
                //         y: 0,
                //         x2: 0,
                //         y2: 1,
                //         colorStops: [{
                //             offset: 0, color: 'red' // 0% 处的颜色
                //         }, {
                //             offset: 1, color: 'blue' // 100% 处的颜色
                //         }],
                //         global: false // 缺省为 false
                //         }
                // }
            },
            //饼图
            {
                name:'就业城市比',
                type:'pie',
                //饼图位置
                center:['90%','15%'],
                //饼图大小
                radius:['10%','20%'],
                data:[
                    {name:'北京',value:10},
                    {name:'上海',value:12},
                    {name:'重庆',value:110},
                    {name:'天津',value:30},
                    
                ]
            }

        ]
    }
    //渲染图表
    myChart.setOption(options)
</script>
</html>